<!--
 * @Description: 打印
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-29 11:14:51
 * @FilePath: /yuxiuproweb/src/views/split/bz/mods/print.vue
-->
<template>
  <el-drawer
    size="60%"
    :visible.sync="shows"
    direction="ltr"
    :with-header="false"
    class="drawer-view"
  >
    <div id="printContent">
      <br />
      <div
        v-for="(data, index) in list"
        :key="index"
        style="padding: 10px 10px 0 10px"
      >
        <div class="header-view">
          <div class="header-left">
            <div class="img-view">
              <div class="img-view-img">
                <img :src="data.barCode" alt="" />
              </div>
              <div class="img-view-mods">
                <div>销售单号：{{ data.salesOrderNumber || "-" }}</div>
                <div class="mt5">加工单号：{{ data.processNumber || "-" }}</div>
              </div>
            </div>
            <div style="padding: 10px 0">
              客户：{{ data.clientInfo || "-" }}
            </div>
          </div>
          <div class="header-right">
            <div class="header-right-list">
              <div>下单：{{ parseTime(data.orderDate, "{y}-{m}-{d}") }}</div>
              <div class="mt5">
                交单：{{ parseTime(data.deliveryTime, "{y}-{m}-{d}") }}
              </div>
              <div class="mt5">客服：{{ data.customerService || "-" }}</div>
            </div>
            <div class="header-right-img">
              <img :src="data.qrcode" alt="" />
            </div>
          </div>
        </div>
        <table width="100%" border="1" cellpadding="8" cellspacing="0">
          <tr align="left">
            <td colspan="5" style="font-weight: bold">
              款式: {{ data.style || "-" }}
            </td>
            <td colspan="3">房间: {{ data.room || "-" }}</td>
            <td colspan="3">{{ data.type || "-" }}</td>
          </tr>
          <tr>
            <td colspan="11">{{ data.curtainInfo || "-" }}</td>
          </tr>
        </table>

        <!--  -->
        <div style="height: 180.5px; overflow: hidden">
          <table
            width="100%"
            class="table-top"
            border="1"
            cellpadding="8"
            cellspacing="0"
            align="center"
          >
            <tr>
              <th>类型</th>
              <th>位置</th>
              <th>产品名称</th>
              <th>米数</th>
              <th>幅数</th>
              <th>宽</th>
              <th>高</th>
              <th>数量</th>
              <th>做法</th>
              <th>备注</th>
            </tr>
            <tr align="center" v-for="(row, index) in data.list" :key="index">
              <td>{{ row.part2 === "1" ? "辅料" : "面料" }}</td>
              <td>
                <template v-if="row.part2 === '0'">
                  {{
                    getTypeName(
                      types.md_complex_machining_model_part_1,
                      row.part
                    ) || row.part
                  }}
                </template>
                <template v-else-if="row.part2 === '1'">
                  {{
                    getTypeName(
                      types.md_complex_machining_model_part_2,
                      row.part
                    ) || row.part
                  }}
                </template>
                <template v-else-if="row.part2 === '-1'">主布</template>
              </td>
              <td>{{ row.name }}</td>
              <td>{{ row.number }}</td>
              <td>{{ row.amplitude }}</td>
              <td>{{ row.width }}</td>
              <td>{{ row.height }}</td>
              <td>{{ row.count }}</td>
              <td>
                {{
                  row.direction === "0"
                    ? "定宽"
                    : row.direction === "1"
                    ? "定高"
                    : ""
                }}
              </td>
              <td>{{ row.remark }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import printJS from "print-js";

export default {
  props: {
    show: Boolean,
    list: {
      type: Array,
    },
    types: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  mounted() {
    setTimeout(() => {
      this.printHtml();
    }, 60);
  },
  methods: {
    printHtml() {
      const style =
        "@page { margin: 0 } @media print { .header-view { width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-left {width: 60%;} .img-view { display: flex; align-items: center; }.img-view-img { height: 60px; } .img-view-img img { height: 100%; } .img-view-mods { margin-left: 10px; } .header-right { display: flex; align-items: center;} .header-right-img { width: 80px; height: 80px; margin-left: 10px; } .header-right-img img { width: 100%; height: 100%; } .table-top {margin-top: 5px} table, td, th { text-align: center; border: 1.5px solid #000; border-collapse: collapse; padding: 2px;font-size: 14px;}} .paging{page-break-after: always;}";
      printJS({
        printable: "printContent",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          this.shows = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-view {
  ::v-deep {
    .el-descriptions-row th {
      display: none;
    }
    .el-descriptions-row td {
      border: 1.5px solid #000;
      color: #000;
    }
  }
}

.header-view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-left {
    width: 60%;
  }
  .img-view {
    display: flex;
    align-items: center;
    &-img {
      height: 80px;
      img {
        height: 100%;
      }
    }
    &-mods {
      margin-left: 10px;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    &-img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
table,
td,
th {
  text-align: center;
  border: 1.5px solid #000;
  border-collapse: collapse;
  padding: 2px;
  font-size: 14px;
}
</style>
